<script setup>
import { ref } from 'vue'
import { MdPreview } from 'md-editor-v3'
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css'

const props = defineProps({
  id: {
    type: String,
    default: 'markdown-preview',
  },
  text: {
    type: String,
    default: '',
  },
})

const id = ref(props.id)
const text = ref(props.text)
</script>

<template>
  <div class="markdown-preview">
    <MdPreview :id="id" :modelValue="text" />
  </div>
</template>

<style scoped lang="scss">
.markdown-preview {
  padding: 2rem;
}
</style>
